<template>
  <el-card class="place-title">
    <p class="link-title">贡献历程</p>
    <div class="link-line">
      <p class="link-line-border"></p>
    </div>
    <!-- 历程 -->
    <div class="place-history">
      <div class="historyEcharts" ref="historyEcharts">
      </div>
    </div>
  </el-card>
</template>

<script>
// 按需引入echarts
import * as echarts from 'echarts/core';
import { TitleComponent,CalendarComponent, TooltipComponent, VisualMapComponent } from 'echarts/components';
import { HeatmapChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
export default {
  data() {
    return {
      timeLineList:[
        {
          createTime:'',
          lineTitle:'共计10条记录',
          creatorName:'',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
      ],
      year:2021,
      chartsList:[],
    };
  },
  watch:{
    '$store.state.nightModeFlag':function (val){
      this.handleDrawCharts(val);
    }
  },
  methods:{
    // 贡献度图表
    handleDrawCharts(flag){
      // 绘制图表
      let chartDom = this.$refs.historyEcharts;
      let myChart = echarts.init(chartDom);
      let option;
      let This = this;
      function getVirtulData(year) {
        year = year || '2022';
        let date = +echarts.number.parseDate(year + '-01-01');
        let end = +echarts.number.parseDate((+year + 1) + '-01-01');
        let dayTime = 3600 * 24 * 1000;
        for (let time = date; time < end; time += dayTime) {
          This.chartsList.push([
            echarts.format.formatTime('yyyy-MM-dd', time),
            Math.floor(Math.random() * 15)
            // 0
          ]);
        }
        return This.chartsList;
      }
      // 配置项
      option = {
        // darkMode:true,
        // 标题
        title: {
          top: 10,
          left:15,
          text: this.year,
          textStyle:{
            color:'#999',
            fontWeight:'normal',
          },
        },
        // 鼠标悬浮提示
        tooltip: {
          trigger: 'item' , 
          formatter(params){
            for(let item in params){
              return params.data[0] + '：' + params.data[1] + '篇文章'
            }  
          },
          textStyle:{
            fontSize:12,
            fontStyle:'italic'
          }
        },
        // 标记样式
        visualMap: {
          type: 'piecewise',
          orient: 'horizontal',
          top: 10,
          right:15,
          color:['#5a81b6','#7acae8','#a7d3ef','#c3ebfd','#c6e2ed'],
          pieces:[
            {min: 1, max: 2,label:' '},
            {min: 3, max: 5,label:' '},
            {min: 6, max: 8,label:' '},
            {min: 9, max: 11,label:' '},
            {min: 12,label:' '},
          ],
        },
        // 日历部分
        calendar: {
          top: 70,
          left: 30,
          right: 30,
          cellSize: ['auto', 13],
          range: this.year,
          splitLine:false, // 月份分割线
          itemStyle: { // 单日样式
            color:'#eee',
            borderWidth: 1.5,
            borderColor:flag?'#1c1f2d':'#fff'
          },
          monthLabel:{ // 月份样式
            color:'#999',
            fontFamily:"'SweiSpringSugar','Times New Roman'"
          },
          dayLabel: { // 星期样式
            // firstDay: 1, // 一周从周一开始
            color: "#999",
            fontFamily:"'SweiSpringSugar','Times New Roman'"
          },
        },
        series: {
          type: 'heatmap',
          coordinateSystem: 'calendar',
          data: getVirtulData(this.year)
        }
      };
      option && myChart.setOption(option);
    },
  },
  created(){
    this.year = new Date().getFullYear();
  },
  mounted(){
    echarts.use(
      [ TitleComponent, CalendarComponent, TooltipComponent, VisualMapComponent, HeatmapChart, CanvasRenderer]
    );
    this.handleDrawCharts(JSON.parse(sessionStorage.getItem('nightFlag'))); // 绘制图表
    // console.log(this.chartsList);
  },
};
</script>

<style lang='scss' scoped>
.place-title{
  margin-bottom:8px;
  .link-title{
    font-size: 16px;
    line-height:24px;
    text-align: center;
    font-family:'Chasing-Light',Georgia, Times, 'Times New Roman', serif;
    color:transparent;
    background-clip: text;
    background-image:  linear-gradient(to right, #091c85, #152ae0,#67b1f7,#3502f0,#11076e);
  }
  // 标题线
  .link-line{
    width:50%;
    margin:10px auto;
    .link-line-border{
      height:2px;
      margin:4px 0;
      background-image:  linear-gradient(to right, #091c85, #152ae0,#67b1f7,#3502f0,#11076e);
    }
  }
  // 历程
  .place-history{
    // border:1px solid red;
    height:180px;
    .historyEcharts{
      width:100%;
      height:100%;
    }
  }
}
</style>
